﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<link href="../css/base.css" rel="stylesheet" type="text/css" />
<link href="../css/layout.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="../layui/css/layui.css"  media="all">
<script type="text/javascript" src="../js/jQuery1.7.js"></script>
<script type="text/javascript" src="../js/demo.js"></script>
<script type="text/javascript"  src="../js/jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="../js/icheck.min.js"></script>
<script>
$(document).ready(function(){
  $('input').iCheck({
    checkboxClass: 'icheckbox_square-blue',  // 注意square和blue的对应关系,用于type=checkbox
    radioClass: 'iradio_square-blue', // 用于type=radio
    increaseArea: '20%' // 增大可以点击的区域
  });
});
</script>
</head>

<body>
<div class="inquiry">
  <form class="layui-form" action="">
    <div id="brandList">
      <div class="button-Orange"><a href="#"><i class="button-icos"><img src="../images/ico/search-ico.png"/></i> <span>搜索</span></a></div>
      <ul class="cons">
        <li>
          <div class="layui-form-item">
            <label class="layui-form-label">账单的期数：</label>
            <div class="layui-input-inline">
              <input type="text" class="layui-input" />
            </div>
          </div>
        </li>
        <li>
          <div class="layui-form-item">
            <label class="layui-form-label">计费对象代码：</label>
            <div class="layui-input-inline">
              <input type="text" class="layui-input" />
            </div>
          </div>
        </li>
        <li>
          <div class="layui-form-item">
            <label class="layui-form-label">计费对象名称：</label>
            <div class="layui-input-inline">
              <input type="text" class="layui-input" />
            </div>
          </div>
        </li>
        <li>
          <div class="layui-form-item">
          <label class="layui-form-label" style="min-width:84px;">账单编号：</label>
          <div class="layui-input-inline">
            <input type="text" class="layui-input" />
          </div>
        </li>
        <li>
          <div class="layui-form-item">
            <label class="layui-form-label">账单金额区间：</label>
            <div class="layui-input-inline">
              <input type="text" class="layui-input" />
            </div>
            <label class="layui-form-label" style="padding: 0 10px 0 10px;">至</label>
            <div class="layui-input-inline" style="margin-left:-1px;">
              <input type="text" class="layui-input" />
            </div>
          </div>
        </li>
      </ul>
      <div id="showMore"><a href="#"><span class="hide"></span></a></div>
      <div class="line"></div>
    </div>
  </form>
</div>
<div class="datail">
  <table width="100%" border="0" cellspacing="0" cellpadding="0" class="site-table table-hover">
    <tr>
      <th width="5%"> <input type="checkbox" name="checkbox" id="checkbox" /></th>
      <th width="12%">账单编号</th>
      <th width="18%">账单期数</th>
      <th width="21%">账单金额</th>
      <th width="13%">账单费用起始时间</th>
      <th width="17%">账单费用终止时间</th>
    </tr>
    <tr>
      <td><input type="checkbox" name="checkbox2" id="checkbox2" /></td>
      <td>NA64021966</td>
      <td>2014年7月 </td>
      <td>90</td>
      <td>2014/11/12</td>
      <td>2014/11/12</td>
    </tr>
    <tr class="td-colr">
     <td><input type="checkbox" name="checkbox2" id="checkbox2" /></td>
      <td>NA64021966</td>
      <td>2014年7月 </td>
      <td>90</td>
      <td>2014/11/12</td>
      <td>2014/11/12</td>
    </tr>
    <tr>
      <td><input type="checkbox" name="checkbox2" id="checkbox2" /></td>
      <td>NA64021966</td>
      <td>2014年7月 </td>
      <td>90</td>
      <td>2014/11/12</td>
      <td>2014/11/12</td>
    </tr>
    <tr class="td-colr">
      <td><input type="checkbox" name="checkbox2" id="checkbox2" /></td>
      <td>NA64021966</td>
      <td>2014年7月 </td>
      <td>90</td>
      <td>2014/11/12</td>
      <td>2014/11/12</td>
    </tr>
    <tr>
     <td><input type="checkbox" name="checkbox2" id="checkbox2" /></td>
      <td>NA64021966</td>
      <td>2014年7月 </td>
      <td>90</td>
      <td>2014/11/12</td>
      <td>2014/11/12</td>
    </tr>
    <tr class="td-colr">
      <td><input type="checkbox" name="checkbox2" id="checkbox2" /></td>
      <td>NA64021966</td>
      <td>2014年7月 </td>
      <td>90</td>
      <td>2014/11/12</td>
      <td>2014/11/12</td>
    </tr>
    <tr>
     <td><input type="checkbox" name="checkbox2" id="checkbox2" /></td>
      <td>NA64021966</td>
      <td>2014年7月 </td>
      <td>90</td>
      <td>2014/11/12</td>
      <td>2014/11/12</td>
    </tr>
    <tr class="td-colr">
      <td><input type="checkbox" name="checkbox2" id="checkbox2" /></td>
      <td>NA64021966</td>
      <td>2014年7月 </td>
      <td>90</td>
      <td>2014/11/12</td>
      <td>2014/11/12</td>
    </tr>
    <tr>
      <td><input type="checkbox" name="checkbox2" id="checkbox2" /></td>
      <td>NA64021966</td>
      <td>2014年7月 </td>
      <td>90</td>
      <td>2014/11/12</td>
      <td>2014/11/12</td>
    </tr>
    <tr class="td-colr">
      <td><input type="checkbox" name="checkbox2" id="checkbox2" /></td>
      <td>NA64021966</td>
      <td>2014年7月 </td>
      <td>90</td>
      <td>2014/11/12</td>
      <td>2014/11/12</td>
    </tr>
    <tr>
      <td><input type="checkbox" name="checkbox2" id="checkbox2" /></td>
      <td>NA64021966</td>
      <td>2014年7月 </td>
      <td>90</td>
      <td>2014/11/12</td>
      <td>2014/11/12</td>
    </tr>
    <tr class="td-colr">
      <td><input type="checkbox" name="checkbox2" id="checkbox2" /></td>
      <td>NA64021966</td>
      <td>2014年7月 </td>
      <td>90</td>
      <td>2014/11/12</td>
      <td>2014/11/12</td>
    </tr>
    <tr>
      <td><input type="checkbox" name="checkbox2" id="checkbox2" /></td>
      <td>NA64021966</td>
      <td>2014年7月 </td>
      <td>90</td>
      <td>2014/11/12</td>
      <td>2014/11/12</td>
    </tr>
    <tr>
      <td><input type="checkbox" name="checkbox2" id="checkbox2" /></td>
      <td>NA64021966</td>
      <td>2014年7月 </td>
      <td>90</td>
      <td>2014/11/12</td>
      <td>2014/11/12</td>
    </tr>
  </table>
</div>
<div class="operating">
  <div class="btn">
    <div class="button"><a href="Sales.html">
      <div class="button-ico"><img src="../images/ico/btn-ico-09.png"/></div>
      <span>销账</span></a></div>
  </div>
  <div class="pages">
    <div id="demo2"></div>
  </div>
</div>
<script type="text/javascript" src="../layui/layui.js"></script> 
<script>
layui.use(['form', 'layedit', 'laydate'], function(){
  var form = layui.form()
  ,layer = layui.layer
  ,layedit = layui.layedit
  ,laydate = layui.laydate;
});

layui.use(['laypage', 'layer'], function(){
  var laypage = layui.laypage
  ,layer = layui.layer;
  
  laypage({
    cont: 'demo2'
    ,pages: 20
    ,skin: '#1E9FFF'
    ,skip: true
    ,first: 1
    ,last: 20
    ,prev: '<em><</em>'
    ,next: '<em>></em>'
  });
  
});
$('.site-table tbody tr').on('click', function(event) {
  var $this = $(this);
   var $input = $this.children('td').eq(0).find('input');
       $input.on('ifChecked', function(e) {
       $this.css('background-color', '#EEEEEE');
    });
       $input.on('ifUnchecked', function(e) {
       $this.removeAttr('style');
    });
	})
</script>
</body>
</html>
